<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      li{
        line-height: 40px
      }
      span{
        color: red
      }
    </style>
</head>
<body>
  <h2>canvas:在页面中设定一个区域，然后就可以用js在这个区域中动态的绘制图形</h2>
  <p>目前所有的支持该元素的浏览器都支持2D上下文及文本api，但对<span>WebGL</span>的支持还不够好</p>
  <ul>
    <li>
      使用canvas元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始结束标签中的内容时后备信息，如果浏览器不支持canvas元素,就会显示这些信息
    </li>
    <li>也可以通过css元素添加样式</li>
    <li>要在canvas上画图，需要取得绘图上下文，而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字，传入‘2d’，就可以取得2D上下文对象</li>
    <li>使用canvas元素前，首先要检测getContext方法是否存在。</li>
    <li>toDataURL()方法，可以导出元素上绘制的图像，<span>但要保证绘制的图像来自相同的域</span></li>
  </ul>
  <canvas id="drawing" width="200" height="200">A drawing of something</canvas>
  <script src="./index.js"></script>
</body>
</html>